<template>
    <div class="rx-dialog-container">
        <div class="m-mobile-layer-header">
            <uv-navbar
                :fixed="false"
                :title="config.title"
                :height="config.titleHeight"
                :left-icon="'arrow-left'"
                :bgColor="config.bgColor"
                :right-text="config.okText"
                @leftClick="close"
                @rightClick="confirm"
            >
            </uv-navbar>
        </div>
        <div class="m-mobile-content">
            <div class="m-mobile-roll">
                <slot></slot>
            </div>
        </div>
    </div>

</template>

<script>

export default {
    name: "RxDialog",
    emits: ['close', 'confirm'],
    props: {
        /**
         * {
         *    title:'标题',
         *   okText:‘’,
         *   titleHeight:
         *   bgColor:""
         * }
         */
        options: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    computed: {
        config() {
            let defaultOptions = {
                title:this.i18n('title','标题'),
                okText:this.i18n('okBtn','确定'),
                titleHeight: 44,
                bgColor: "rgb(66, 133, 242)",
                color:'white'
            }
            return {...defaultOptions, ...this.options}
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"allLang",key);
        },
        close() {
            this.$emit('close')
        },
        confirm() {
            this.$emit('confirm')
        }
    }
}
</script>

<style scoped>
.rx-dialog-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.m-mobile-content {
    flex: 1;
    position: relative;
    order: 1;
}

.m-mobile-roll {
    position: absolute;
    inset: 0;
    background-color: #f4f5f6;
    padding: 10px;
    overflow: auto;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.m-mobile-layer-header {
    order: 0;
}
.m-mobile-layer-header>>>.uv-navbar__content,.m-mobile-layer-header>>>.uv-navbar__content__title,.m-mobile-layer-header>>>.uvicon-arrow-left{
    color: white!important;
}

</style>
